<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link type="text/css" href="${pageContext.request.contextPath}/js/jquery/ajaxFileUploader/ajaxfileupload.css" rel="stylesheet">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/ajaxFileUploader/ajaxfileupload.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/ajaxFileUploader/upload.js"></script>
	<script type="text/javascript">
	function ajaxFileUpload(_fileElementId) {
		var _param = {
				//图片限制类型
				imgConfineType   : ">=",
				//图片限制宽度
				imgConfineWidth  : "75",
				//图片限制高度
				imgConfineHeight : "75"
		};
		var data = {
				addressAll : "${pageContext.request.contextPath}/uploadServlet",
				fileElementId : _fileElementId,
				param : _param,
				success : function(_data) {
					showImg(_data.filename, _data.url, _data.orgFilename);
				}
		};
		fileUpload.ajaxFileUpload(data);
	}
	//设置图片显示
	function showImg(_filename, _url, _orgFilename) {
		alert("上传成功!");
		jQuery("#showImg").attr("src", "${pageContext.request.contextPath}/" + _url);
		jQuery("#imgName").html(_orgFilename);
	}

	$(document).ready( function () {
		//初始化file控件的位置
		fileUpload.initFileLocation({fileId:'fileToUploadOne', clickId : 'fileClickIdOne'});
		fileUpload.initFileLocation({fileId:'fileToUploadTwo', clickId : 'fileClickIdTwo'});
	});

	//获取图片尺寸
	function getImgDimension() {
		var dimension = fileUpload.getImgDimension("uploadFile");
		alert("宽: " + dimension.width + " 高: " + dimension.height);
	}
	</script>
</head>
<body>
<div id="wrapper">
    <div id="content">
    	<h1>Ajax File Upload Demo</h1>
    	<p>Jquery File Upload Plugin  - upload your files with only one input field</p>
				<p>
				need any Web-based Information System?<br> Please <a href="http://www.phpletter.com/">Contact Us</a><br>
				We are specialized in <br>
				<ul>
					<li>Website Design</li>
					<li>Survey System Creation</li>
					<li>E-commerce Site Development</li>
				</ul>
		<img id="loading" src="${pageContext.request.contextPath}/js/jquery/ajaxFileUploader/loading.gif" style="display:none;">
		<form name="form" action="#" method="POST" enctype="multipart/form-data">
		<table cellpadding="0" cellspacing="0" class="tableForm">
			<thead>
				<tr>
					<th>Please select a file and click Upload button</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td><input type="button" class="button" onclick="ajaxFileUpload();" value="Upload" /></td>
				</tr>
			</tfoot>
		</table>
		</form>

		<h3>点击图片上传做法</h3>
		&nbsp;<a id="fileClickIdOne" href="#">图片</a>
		<input id="fileToUploadOne" type="file" size="45" name="fileToUploadOne" onchange="ajaxFileUpload('fileToUploadOne');">
		<img id="loadingOne" src="${pageContext.request.contextPath}/js/jquery/ajaxFileUploader/loading.gif" style="display:none;"><br/>

		&nbsp;&nbsp;&nbsp;<a id="fileClickIdTwo" href="#">图片</a>
		<input id="fileToUploadTwo" type="file" size="45" name="fileToUploadTwo" onchange="ajaxFileUpload('fileToUploadTwo');">
    </div>
    <br clear="all"/>
    <div>
    	名称: <font id="imgName"></font>
    	<img id="showImg" alt="无"/>
    </div>
    <br clear="all"/>
    <hr>
	上传图片显示并获取大小
    <input type="file" id="uploadFile"/>
    <input type="button" value="获取图片尺寸" onclick="getImgDimension();"/>
    <input type="button" value="获取图片大小"/>
    <img id="uploadFileImg"/>
</div>
</body>
</html>